<template>
	<div class="wd_welfare">
		<div class="wd_welfare_sign">
			<div class="wd_welfare_signTitle flex justify_cen align_center">
				<img src="../../../../static/img/images/welfare1.png" />
				<span>签到有礼</span>
				<img src="../../../../static/img/images/welfare2.png" />
			</div>
			<div class="wd_welfare_signBody">
				<div class="wd_welfare_signContinuity">
					<div class="wd_welfare_signContinuityT clear2">
						<img src="../../../../static/img/images/welfare3.png" style="float: left;margin-left: 15%;" />
						<img src="../../../../static/img/images/welfare3.png" style="float: right;margin-right: 15%;" />
					</div>
					<div class="wd_welfare_signContinuityT2">
						第<span>{{qd.key}}</span>天
					</div>
				</div>
				<p class="wd_welfare_signContinuityP">
					还需连续签到{{7-qd.key}}天，即可获得10匠子
				</p>
				<div class="wd_welfare_signD flex_wrap">
					<div class="wd_welfare_signDiv" v-for="(data,key) in signData" :class="key<qd.key?'wd_welfare_signDiv2':''">
						<div class="wd_welfare_signDivT">
							第{{key+1}}天
						</div>
						<div class="wd_welfare_signDivP">
							<div class="wd_welfare_signDivP1">
								{{data.num}}
							</div>
							<div class="wd_welfare_signDivP2">
								{{data.text}}
							</div>
						</div>
						
					</div>
				</div>
				<p class="wd_welfare_signContinuityP2">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>签到规则<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				</p>
				<p class="wd_welfare_signContinuityP3">
					1、每日签到，即可获取奖励
				</p>
				<p class="wd_welfare_signContinuityP3">
					2、如中断签到，需重新开始
				</p>
			</div>
			<el-button @click='qiandao(1)' round class='wd_welfare_signButton'>{{qd.name=='0'?'签到':'已签到'}}</el-button>
		</div>
		<!--<div class="wd_welfare_Invitation">
			<img src="../../../../static/img/images/welfare4.jpg" class="wd_welfare_InvitationImg" />
			<p class="wd_welfare_InvitationP">{{hong2.count}}次拆开红包，剩余任务红包</p>
			<div class="wd_welfare_InvitationNum flex justify_cen">
				<span class="wd_welfare_InvitationNums1">{{jiang[0]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[1]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">,</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[2]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[3]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[4]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">,</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[5]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[6]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[7]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">匠子</span>
			</div>
			<div class="wd_welfare_InvitationP2">
				已领到{{hong2.sum}}匠子
				<span>查看详情></span>
			</div>
			<div class="wd_welfare_InvitationBody clear2">
				<div class="wd_welfare_InvitationBodyImg" @click="qiandao(2)">
					<img :src="hongImg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg" @click="fx">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				<div class="wd_welfare_InvitationBodyImg">
					<img src="../../../../static/img/images/welfare7.jpg" />
				</div>
				
			</div>
		</div>-->
		<el-dialog
		  title="提示"
		  :visible.sync="centerDialogVisible"
		  width="80%"
		  center>
		  <div style="width: 90%;margin: 0 auto;">
		  	<p style="text-align: center;font-size: 1.6rem;line-height: 2rem;margin-bottom: 1rem;">注册匠主方可签到</p>
		  	<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">手机号</div>
				<input type="text" class="flex1" v-model="mobile" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">验证码</div>
				<input type="text" class="flex1" v-model="sms_code" />
				<v-Code :phoneNew='mobile'></v-Code>
			</div>
		  </div>
		  <span slot="footer" class="dialog-footer clear2">
		    <el-button @click="centerDialogVisible = false" class='dialog-footerSpan'>取 消</el-button>
		    <el-button type="primary" @click="craftsman_reg" class='dialog-footerSpan' style='color: #f7bd40;border-right: 0;'>确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	import vCode from '../../common/yzm.vue';
	
	export default {
		components:{
            vCode
        },
		data: function() {
			return {
				mobile:'',
				sms_code:'',
				signData:[],
				jiang:[],
				jiangNum:'99999999',
				centerDialogVisible:false,
				qd:{
					'key':0,
					'name':'签到'
				},
				hong:{},
				hong2:{},
				hongImg:'../../../../static/img/images/welfare5.jpg',
			}
		},
		mounted() {
			
			this.get_welfare_parame();
			
			
			this.hongStatus();
			this.qianStatus();
			
		},
		methods: {
			fx(){
				if(this.hong.status=='2'){
					this.Toast('请先领取当前红包');
					
				}
				else{
					this.Toast('请点击右上角分享');
					let model={
						title: '匠作优品', // 分享标题
		  				desc: '全民嗨抢，瓜分1亿现金，疯抢无限制！', // 分享描述
		  				link: 'http://www.jiangzuoyoupin.com/#/homePage?reg_invitation_code='+this.peopleList.invitation_code+'&type=2', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		  				imgUrl:'http://www.jiangzuoyoupin.com/static/img/images/logo2.jpg',
					}
					this.wxready(model);
				}
			},
			qianStatus(){
				this.get_sign_info();
			},
			hongStatus(){
				this.get_red_packets();
				this.get_red_packet();
			},
			receive_red_packet(){
				this.ajax(this, {
					'url': this.defines.receive_red_packet,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.hongImg='../../../../static/img/images/welfare6.jpg';
							this.get_red_packet();
							this.hong.status='3';
						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			
			get_red_packet(){
				this.ajax(this, {
					'url': this.defines.get_red_packet,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.hong2=data.data.data;
							this.jiangNum=data.data.data.surplus_all_integral;
							let num = this.jiangNum.toString();
							let html_num=[];
							html_num=num.split('');
							if(html_num.length<8){
								let num_length=8-html_num.length
								for(let i=0;i<num_length;i++){
									html_num.splice(0,0,"0");
								}
							}
							this.jiang=html_num;
							

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_red_packets(){
				this.ajax(this, {
					'url': this.defines.get_red_packets,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.hong=data.data.data;
							if(data.data.data.status==2){
								this.hongImg='../../../../static/img/images/welfare5.jpg'
							}
							else{
								this.hongImg='../../../../static/img/images/welfare7.jpg'
							}
							console.log(data)

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			sign(){
				this.ajax(this, {
					'url': this.defines.sign,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.Toast(data.data.error_msg)
							this.qianStatus();

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_sign_info(){
				this.ajax(this, {
					'url': this.defines.get_sign_info,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.qd={
								'key':parseInt(data.data.data.day),
								'name':data.data.data.is_sign
							}
							console.log(data);

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_welfare_parame(){
				this.ajax(this, {
					'url': this.defines.get_welfare_parame,
					'type': 'get',
					'callback': data => {
						if(data.data.error_code==0) {
			
							this.signData=data.data.data.sign_parame;
							

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			qiandao(type){
				
				if(!this.peopleList.is_reg){
					this.centerDialogVisible=true;
				}
				else{
					if(type == '1'){
						this.sign();
					}
					if(type == '2'){
						this.Toast('请点击右上角分享')
						if(this.hong.status=='2'){
							this.receive_red_packet();
						}
						if(this.hong.status=='1'){
							console.log(this.hong.status)
							let model={
								title: '匠作优品', // 分享标题
				  				desc: '全民嗨抢，瓜分1亿现金，疯抢无限制！', // 分享描述
				  				link: 'http://www.jiangzuoyoupin.com/#/homePage?reg_invitation_code='+this.peopleList.invitation_code+'&type=2', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				  				imgUrl:'http://www.jiangzuoyoupin.com/static/img/images/logo2.jpg',
							}
							this.wxready(model);
						}
						
					}
				}
				
				
			},
			craftsman_reg(){
				if(this.sms_code==''||this.mobile==''){
					this.Toast('请先填写数据');
					return false;
				}
				
				this.centerDialogVisible = false
				this.ajax(this, {
					'url': this.defines.craftsman_reg,
					'type': 'post',
					'data':{
						'mobile':this.mobile,
						'sms_code':this.sms_code,
						'member_id':window.uid,
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.Toast(data.data.error_msg);
							this.$parent.get_member_info();

						} else {
							this.Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
		}
	}
</script>

<style scoped>
	.wd_welfare{
		width: 100%;
		
	}
	.wd_welfare_sign{
		width: 100%;
	}
	.wd_welfare_signTitle{
		height: 4rem;
		width: 100%;
		background: #000;
		overflow: hidden;
	
	}
	.wd_welfare_signTitle span{
		font-size: 1.8rem;
		color: #fff;
		padding: 0 1.5rem;
	}
	.wd_welfare_signTitle img{
		height: 1.8rem;
		display: block;
	}
	.wd_welfare_signBody{
		width: 88%;
		margin-top: 2rem;
		padding: 0 6%;
		border-bottom: 0.1rem solid #ccc;
		padding-bottom: 1rem;
	}
	.wd_welfare_signContinuity{
		border: 0.1rem solid #000;
		overflow: hidden;
		border-radius: 0.5rem;
		margin: 0 auto;
		width: 30%;
		
	}
	.wd_welfare_signContinuityT{
		width: 100%;
		height:2rem ;
		background: #000;
		
	}
	.wd_welfare_signContinuityT img{
		height: 1.8rem;
		display: block;
	}
	.wd_welfare_signContinuityT2{
		height: 4rem;
		padding: 0.5rem 0;
		font-size: 1.6rem;
		text-align: center;
	}
	.wd_welfare_signContinuityT2 span{
		font-size: 5rem;
		display: inline-block;
		height: 4rem;
		line-height: 4rem;
		padding: 0 0.2rem;
	}
	.wd_welfare_signContinuityP{
		font-size: 1.3rem;
		text-align: center;
		line-height: 1.5rem;
		padding: 0.75rem 0;
	}
	.wd_welfare_signD{
		width: 100%;
	}
	.wd_welfare_signDiv{
		width: 23%;
		margin: 0.9rem 1% 0 1%;
		border-radius: 0.4rem;
		overflow: hidden;
		box-sizing: border-box;
	}
	.wd_welfare_signDivT{
		height: 1.9rem;
		background: #000;
		width: 100%;
		color: #fff;
		font-size: 1.3rem;
		text-align: center;
		line-height: 1.9rem;
	}
	.wd_welfare_signDiv2 .wd_welfare_signDivT{
		color: #f7bd40;
	}
	.wd_welfare_signDivP{
		border: 0.1rem solid #000;
		border-bottom-left-radius: 0.4rem;
		border-bottom-right-radius: 0.4rem;
	}
	.wd_welfare_signDivP1{
		font-size: 2rem;
		margin: 0.8rem 0 0.6rem 0;
		line-height: 2rem;
		text-align: center;
	}
	.wd_welfare_signDivP2{
		font-size: 1.2rem;
		padding-bottom: 0.6rem;
		text-align: center;
	}
	.wd_welfare_signContinuityP2{
		font-size: 1.6rem;
		text-align: center;
		margin: 1.5rem 0 0.5rem;
		
	}
	.wd_welfare_signContinuityP2 span{
		display: inline-block;
		width:4.5rem;
		text-decoration:line-through;
		color: #666666;
		height: 1.6rem;
	}
	.wd_welfare_signContinuityP3{
		font-size: 1.3rem;
		color: #999999;
		line-height: 1.8rem;
		text-align: center;
		
	}
	.wd_welfare_signButton{
		width: 35%;
		background: #000;
		color: #fff;
		font-size: 1.8rem;
		padding: 0.5rem 0;
		margin: 2rem auto;
		display: block;
	}
	.wd_welfare_Invitation{
		width: 100%;
		background: #000;
		padding-bottom: 1rem;
		
	}
	.wd_welfare_InvitationImg{
		width: 100%;
		display: block;
	}
	.wd_welfare_InvitationP{
		font-size: 1.2rem;
		color: #fff;
		text-align: center;
		margin: 1.2rem 0 0.8rem 0;
	}
	.wd_welfare_InvitationNum{
		width: 100%;
	}
	.wd_welfare_InvitationNums1{
		font-size: 2.4rem;
		color: #f9e5a4;
		display: inline-block;
		padding: 0.1rem 0.2rem;
		border: 0.1rem solid #666666;
		border-radius: 0.4rem;
	}
	.wd_welfare_InvitationNums2{
		font-size: 1.5rem;
		color: #f9e5a4;
		padding: 0 0.5rem;
	}
	.wd_welfare_InvitationNums2:nth-last-child(1){
		padding-left: 0.8rem;
	}
	.wd_welfare_InvitationP2{
		margin: 2rem 0 1rem 0;
		text-align: center;
		position: relative;
		color: #f9e5a5;
		font-size: 1.5rem;
		height: 1.5rem;
	}
	.wd_welfare_InvitationP2 span{
		position: absolute;
		display: inline-block;
		height: 1.5rem;
		top: 0;
		right: 10%;
		font-size: 1.2rem;
		color: #f9e5a5;
		line-height: 1.8rem;
		
	}
	.wd_welfare_InvitationBody{
		width: 88%;
		padding: 0 6%;
	}
	.wd_welfare_InvitationBodyImg{
		width: 32%;
		float: left;
		margin-top: 1rem;
	}
	.wd_welfare_InvitationBodyImg:nth-child(3n-1){
		margin: 1rem 2% 0 2%;
	}
	.wd_welfare_InvitationBodyImg img{
		width: 100%;
		display: block;
	}
	.Jregister_body_input{
		height: 3rem;
		width: 100%;
		margin-bottom: 1rem;
	}
	.Jregister_body_name{
		font-size: 1.6rem;
		margin-right: 1.6rem;
	}
	.Jregister_body_input input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #fff;
		border: 1px solid #e6e6e6;
		box-sizing: border-box;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.Jregister_body_code{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
</style>
<style>
	.wd_welfare .el-dialog__body{
		padding: 0;
	}
	.wd_welfare .el-dialog__header{
		padding-bottom: 0;
	}
	.wd_welfare .el-dialog__footer{
		padding: 0;
	}
	.wd_welfare .dialog-footerSpan{
		width: 50%;
		box-sizing: border-box;
		border: 0;
		margin: 0;
		border-radius: 0;
		float: left;
		background: #000;
		color: #fff;
		border-right:1px solid #fff ;
	}
	.wd_welfare .el-dialog{
		border-radius: 0.4rem;
		overflow: hidden;
	}
</style>